<template>
  <div>
    <vxe-toolbar ref="xToolbar" export>
      <template #buttons>
        <vxe-button @click="clog">clog</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-footer
      show-overflow
      ref="xTable"
      height="400"
      class="editable-footer"
      :row-config="{ isHover: true }"
      :data="tableData"
      :edit-config="{ trigger: 'click', mode: 'row' }"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.name" type="text"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column
        field="chinese"
        title="chinese"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <template #edit="{ row }">
          <vxe-input
            v-model="row.chinese"
            type="number"
            :min="1"
            :max="120"
            @change="change(row)"
          ></vxe-input>
        </template>
      </vxe-column>
      <vxe-column
        field="math"
        title="math"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <template #edit="{ row }">
          <vxe-input
            v-model="row.math"
            type="number"
            :min="1"
            :max="120"
            @change="change(row)"

          ></vxe-input>
        </template>
      </vxe-column>
      <vxe-column
        field="english"
        title="english"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <template #edit="{ row }">
          <vxe-input
            v-model="row.english"
            type="number"
            :min="1"
            :max="120"
            @change="change(row)"

          ></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="sum" title="总分">
      </vxe-column>
    </vxe-table>

  <div class="block">
    <span class="demonstration">默认 Hover 指示器触发</span>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="block">
    <span class="demonstration">Click 指示器触发</span>
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', math: 56, chinese: 50, english: 28, sum: 0 },
        { id: 10002, name: 'Test2', math: 56, chinese: 50, english: 28, sum: 0 },
        { id: 10003, name: 'Test3', math: 56, chinese: 50, english: 28, sum: 0 },
        { id: 10004, name: 'Test4', math: 56, chinese: 50, english: 28, sum: 0 },
        { id: 10005, name: 'Test5', math: 56, chinese: 50, english: 28, sum: 0 }
      ]
    }
  },
  created () {
  },
  methods: {
    change (e) {
      console.log(e)
      e.sum = Number(e.english) + Number(e.chinese) + Number(e.math)
    },
    clog () {
      console.log(this.tableData)
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }</style>
